<template>
	<!-- 车牌组件 -->
	<view class="plate-content">
		<view class="plate-popup" v-show="plateShow">
			<view class="plate-close" @click="handleHeaderButtonClick">{{ plateNumber.length > 6 ? '确定' : '关闭' }}</view>
			<view class="numbox" v-if="isShow">
				<block v-for="(item, index) in 7" :key="index">
					<input v-model="plateArray[index]" disabled class="numInput" maxlength="1" type="text" value=""
						@click="carInputClick(index)" />
				</block>
				<input v-model="plateArray[7]" disabled class="newnumInput" maxlength="1" type="text" value=""
					placeholder-class="newpl" @click="carInputClick(7)" />
			</view>
			<!-- 汉字键盘 -->
			<view v-show="!plateNumber" :class="safeArea ? 'isPhoneX' : ''">
				<view class="plate-popup-item">
					<view class="plate-popup-item-list" v-for="(item, itemIndex) in keyVehicle1" :key="itemIndex"
						@click="plateHead(item)">{{ item }}</view>
				</view>
				<view class="plate-popup-item">
					<view class="plate-popup-item-list" v-for="(item, itemIndex) in keyVehicle2" :key="itemIndex"
						@click="plateHead(item)">{{ item }}</view>
				</view>
				<view class="plate-popup-item">
					<view class="plate-popup-item-list" v-for="(item, itemIndex) in keyVehicle3" :key="itemIndex"
						@click="plateHead(item)">{{ item }}</view>
				</view>
				<view class="plate-popup-item">
					<view class="plate-popup-item-list" v-for="(item, itemIndex) in keyVehicle4" :key="itemIndex"
						@click="plateHead(item)">{{ item }}</view>
					<!-- 删除 -->
					<view class="plate-popup-item-list delImg" @click="plateDel">
						<image :src="src" />
					</view>
				</view>
			</view>
			<!-- 数字字母键盘 -->
			<view v-show="plateNumber" :class="safeArea ? 'isPhoneX' : '' ">
				<view class="plate-popup-item">
					<!-- 数字选择 -->
					<view class="plate-popup-item-list"
						:class="plateNumber.length < 2 || isInputZh ? 'plate-popup-item-disabled' : ''"
						v-for="(item, itemIndex) in keyNumber" :key="itemIndex" @click="plateNum(item)">{{ item }}
					</view>
				</view>
				<view class="plate-popup-item">
					<view class="plate-popup-item-list" :class="!isInputZh ? '' : 'plate-popup-item-disabled'"
						v-for="(item, itemIndex) in keyEnInput1" :key="itemIndex" @click="plateInput(item)">
						<view :class="item =='I' || item == 'O' ? 'plate-popup-item-disabled' : ''">{{ item }}</view>
					</view>
				</view>
				<view class="plate-popup-item">
					<view class="plate-popup-item-list" :class="!isInputZh ? '' : 'plate-popup-item-disabled'"
						v-for="(item, itemIndex) in keyEnInput2" :key="itemIndex" @click="plateInput(item)">{{ item }}
					</view>
				</view>
				<view class="plate-popup-item">
					<view class="plate-popup-item-list" :class="!isInputZh ? '' : 'plate-popup-item-disabled'"
						v-for="(item, itemIndex) in keyEnInput3" :key="itemIndex" @click="plateInput(item)">{{ item }}
					</view>
				</view>
				<view class="plate-popup-item">
					<!-- 车牌最后一位-->
					<view class="plate-popup-item-list del2"
						:class="(plateNumber.length === 6 || plateNumber.length === 7) && !isInputZh ? '' : 'plate-popup-item-disabled'"
						v-for="(item, itemIndex) in keyEnInput4" :key="itemIndex" @click="plateLast(item)">{{ item }}
					</view>
					<!-- 删除 -->
					<view class="plate-popup-item-list delImg" @click="plateDel">
						<image :src="src" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/*
	 * @change By:CkCode
	 * @logs:
	 * 1:将键盘和输入框整合到了一起
	 * 2:适配苹果X 
	 * 3:增加校验规则
	 * 4:增加了错误提示
	 * @Last Modified time: 2022-10-17
	 */
	import plateDel from './KeyboardDelete.png'

	export default {
		data() {
			return {
				plateNumber: '', //输入的车牌
				plateShow: false, //车牌选择是否打开
				keyVehicle1: ['京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑', '湘'],
				keyVehicle2: ['皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘'],
				keyVehicle3: ['晋', '蒙', '陕', '吉', '闽', '贵', '渝', '川'],
				keyVehicle4: ['青', '藏', '琼', '宁', '使'],
				keyNumber: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
				keyEnInput1: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
				keyEnInput2: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
				keyEnInput3: ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
				keyEnInput4: ['港', '澳', '学', '警', '临', '挂'],
				isInputZh: false, //是否输入了特殊字符
				src: '',
				currentIndex: -1, // 当前输入位置
				_plateArray: Array(8).fill(''), // 内部数组
				_initialValueSet: false, // 初始值标志
			};
		},
		computed: {
			// 将字符串转换为数组，供输入框使用
			plateArray: {
				get() {
					// 确保返回一个长度为8的数组
					const arr = Array(8).fill('');
					if (this.plateNumber) {
						const chars = this.plateNumber.split('');
						for (let i = 0; i < chars.length && i < 8; i++) {
							arr[i] = chars[i];
						}
					}
					return arr;
				},
				set(newArr) {
					// 当数组更新时，同步更新字符串
					this.plateNumber = newArr.join('');
				}
			}
		},
		props: {
			//是否开启输入框
			isShow: {
				type: Boolean,
				default: true
			},
			//是否适配安全线（iphone X）
			safeArea: {
				type: Boolean,
				default: false
			},
		},
		mounted() {
			this.src = plateDel;
		},
		onShow() {},
		watch: {
			plateNumber(num) {
				this.$emit('update:plateNum', num);
			}
		},
		methods: {
			/**
			 * @desc 初始化
			 */
			init() {
				this.plateNumber = '';
				this.currentIndex = 0; // 将currentIndex设为0，表示从第一个位置开始输入
				this._plateArray = Array(8).fill('');
				this.isInputZh = false;
			},
			/**
			 * @desc 打开下拉栏
			 */
			open() {
				// 每次打开时，如果没有传入初始值，则初始化
				if (!this._initialValueSet) {
					this.init();
				}
				this._initialValueSet = false; // 重置初始值标志
				this.plateShow = true;
			},
			/**
			 * @desc 设置初始车牌号（用于编辑场景）
			 */
			setInitialValue(value) {
				if (value) {
					this.plateNumber = value;
					this.currentIndex = value.length; // 将光标设置到末尾
					this._initialValueSet = true; // 标记已设置初始值
					
					// 如果车牌号包含特殊字符，设置标志
					const lastChar = value.charAt(value.length - 1);
					this.isInputZh = ['港', '澳', '学', '警', '临', '挂'].includes(lastChar);
				}
			},
			/**
			 * @desc 处理顶部按钮点击
			 */
			handleHeaderButtonClick() {
				// 车牌长度大于6时，点击的是"确定"按钮
				if (this.plateNumber.length > 6) {
					this.confirm();
				} else {
					// 否则点击的是"关闭"按钮
					this.close();
				}
			},
			/**
			 * @desc 确认车牌
			 */
			confirm() {
				// 保存当前结果
				const result = this.plateNumber;
				
				// 检查车牌格式是否有效
				if (this.isVehicleNumber(result)) {
					// 清空输入，为下次打开做准备
					this.init();
					this.plateShow = false;
					// 传值到父组件
					this.$emit('change', {
						value: result
					});
				} else {
					// 车牌格式无效时提示用户
					uni.showToast({
						title: '车牌号输入错误,请检查格式',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			/**
			 * @desc 关闭弹出的车牌
			 */
			close() {
				// 如果有输入则提示用户
				if (this.plateNumber) {
					uni.showModal({
						title: '温馨提示',
						content: '关闭将会清空您已输入的内容',
						success: res => {
							if (res.confirm) {
								this.init();
								this.plateShow = false;
							}
						},
					});
				} else {
					// 如果没有任何输入，直接关闭
					this.plateShow = false;
				}
			},
			/**
			 * @desc 车牌号验证方法
			 * @param {String} vehicleNumber - 需要验证的车牌号
			 * @returns {Boolean} - 验证结果
			 */
			isVehicleNumber(vehicleNumber) {
				// 空值检查
				if (!vehicleNumber || vehicleNumber.trim() === '') {
					return false;
				}
				
				// 移除可能的空格
				vehicleNumber = vehicleNumber.trim();
				
				// 普通车牌 - 7位
				// 第1位：省份简称
				// 第2位：城市代码（字母）
				// 第3-6位：序号（字母和数字，但不包括I和O）
				// 第7位：号牌尾数（字母、数字或特殊字符）
				const normalReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳临]{1}$/;
				
				// 新能源车牌 - 8位
				// 两种情况：
				// 1. 省份+字母+5位数字+D/F
				// 2. 省份+字母+D/F+字母/数字+4位数字
				const newEnergyReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/;
				
				// 武警车牌
				const policeReg = /^WJ[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼]{1}[0-9]{4}[JDBC]$/;
				
				// 军队车牌
				const armyReg = /^[A-Z]{2}[0-9]{5}$/;
				
				// 大使馆车牌
				const embassyReg = /^[使领]{1}[0-9]{3}[A-Z]{1}$/;
				
				// 香港澳门车牌
				const hkmoReg = /^[粤港澳]{1}[0-9A-Z]{6}$/;
				
				// 根据车牌长度进行不同验证
				if (vehicleNumber.length === 7) {
					// 7位车牌可能是普通车牌、军队车牌或港澳车牌
					return normalReg.test(vehicleNumber) || 
						   armyReg.test(vehicleNumber) || 
						   hkmoReg.test(vehicleNumber);
				} else if (vehicleNumber.length === 8) {
					// 8位车牌通常是新能源车牌或武警车牌
					// newEnergyReg.test(vehicleNumber) || policeReg.test(vehicleNumber);
					return true;
				} 
				else if (vehicleNumber.length === 5) {
					// 5位车牌，检查是否是大使馆车牌
					return embassyReg.test(vehicleNumber);
				} else {
					return false;
				}
			},
			/**
			 * @desc 输入框点击事件
			 */
			carInputClick(index) {
				// 记录当前点击的输入框位置
				this.currentIndex = index;
			},
			/**
			 * @desc 汉字选择
			 */
			plateHead(plate) {
				if (!this.plateNumber) {
					this.plateNumber = plate;
					// 自动切换到下一个输入位置
					this.currentIndex = 1;
					// 强制刷新
					this.$forceUpdate();
				}
			},
			/**
			 * @desc 字母选择
			 */
			plateInput(plate) {
				// 判断是否输入了字母
				if (this.isInputZh || plate == 'I' || plate == 'O') {
					return;
				}
				
				if (this.plateNumber.length < 8) {
					if (this.currentIndex >= 0 && this.currentIndex < 8) {
						// 在指定位置插入字符
						let plateArr = this.plateNumber.split('');
						// 如果当前位置已经超出数组长度，先填充空字符
						while (plateArr.length <= this.currentIndex) {
							plateArr.push('');
						}
						plateArr[this.currentIndex] = plate;
						this.plateNumber = plateArr.join('');
						
						// 自动移动到下一个输入位置
						if (this.currentIndex < 7) {
							this.currentIndex++;
						}
					} else {
						// 如果没有指定位置，默认添加到末尾
						this.plateNumber = this.plateNumber + plate;
					}
					// 强制刷新
					this.$forceUpdate();
				}
			},
			/**
			 * @desc 数字选择
			 */
			plateNum(plate) {
				// 判断是否输入了字母
				if (this.isInputZh) {
					return;
				}
				
				if (this.plateNumber.length >= 1 && this.plateNumber.length < 8) {
					if (this.currentIndex > 0 && this.currentIndex < 8) {
						// 在指定位置插入字符
						let plateArr = this.plateNumber.split('');
						// 如果当前位置已经超出数组长度，先填充空字符
						while (plateArr.length <= this.currentIndex) {
							plateArr.push('');
						}
						plateArr[this.currentIndex] = plate;
						this.plateNumber = plateArr.join('');
						
						// 自动移动到下一个输入位置
						if (this.currentIndex < 7) {
							this.currentIndex++;
						}
					} else {
						// 如果没有指定位置，默认添加到末尾
						this.plateNumber = this.plateNumber + plate;
					}
					// 强制刷新
					this.$forceUpdate();
				}
			},
			/**
			 * @desc 最后一位选择
			 */
			plateLast(plate) {
				// 判断是否输入了字母
				if (this.isInputZh) {
					return;
				}
				
				if (this.plateNumber.length === 6 || this.plateNumber.length === 7) {
					if (this.currentIndex >= 6 && this.currentIndex < 8) {
						// 在指定位置插入字符
						let plateArr = this.plateNumber.split('');
						// 如果当前位置已经超出数组长度，先填充空字符
						while (plateArr.length <= this.currentIndex) {
							plateArr.push('');
						}
						plateArr[this.currentIndex] = plate;
						this.plateNumber = plateArr.join('');
					} else {
						// 如果没有指定位置，默认添加到末尾
						this.plateNumber = this.plateNumber + plate;
					}
					this.isInputZh = true;
					// 强制刷新
					this.$forceUpdate();
				}
			},
			/**
			 * @desc 删除
			 */
			plateDel() {
				if (this.plateNumber) {
					// 获取当前的数组表示
					const plateArr = [...this.plateArray];
					
					// 当前位置索引
					let deleteIndex = this.currentIndex;
					
					// 如果设置了当前索引并且有效
					if (deleteIndex >= 0 && deleteIndex < this.plateNumber.length) {
						// 删除指定位置的字符
						plateArr[deleteIndex] = '';
						
						// 保存删除位置，用于重设光标
						const deletedAt = deleteIndex;
						
						// 将数组压缩，移除空值，然后重新分配
						const compressedArr = plateArr.filter(char => char);
						this._plateArray = Array(8).fill('');
						for (let i = 0; i < compressedArr.length; i++) {
							this._plateArray[i] = compressedArr[i];
						}
						
						// 更新plateNumber
						this.plateNumber = this._plateArray.join('');
						
						// 设置光标位置到删除的地方，而不是前移
						this.currentIndex = deletedAt;
					} else {
						// 默认删除最后一个非空字符
						let lastIndex = plateArr.length - 1;
						while (lastIndex >= 0 && !plateArr[lastIndex]) {
							lastIndex--;
						}
						
						if (lastIndex >= 0) {
							plateArr[lastIndex] = '';
							this._plateArray = plateArr;
							this.plateNumber = plateArr.join('');
							this.currentIndex = lastIndex; // 保持光标在删除位置
						}
					}
					
					// 检查长度，更新特殊字符标志
					if (this.plateNumber.length <= 6) {
						this.isInputZh = false;
					}
					
					// 强制刷新视图
					this.$forceUpdate();
				}
			},
		},
	};
</script>

<style lang="scss">
	/*宽度转换vw*/
	@function vww($number) {
		@return ($number / 375) * 750+rpx;
	}

	.isPhoneX {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.numbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 0 24rpx 32rpx;

		.numInput {
			width: 76rpx;
			height: 96rpx;
			line-height: 92rpx;
			text-align: center;
			background: #ffffff;
			border-radius: 4rpx;
			border: 2rpx solid #e6e6e6;
			font-size: 44rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #333333;
		}

		.numInputon {
			position: relative;
			border: 2rpx solid #377cff;

			&::after {
				width: 56rpx;
				height: 4rpx;
				background: #377cff;
				border-radius: 2rpx;
				content: '';
				position: absolute;
				bottom: 6rpx;
				left: 12rpx;
			}
		}

		.newnumInput {
			width: 76rpx;
			height: 96rpx;
			line-height: 92rpx;
			text-align: center;
			border-radius: 4rpx;
			font-size: 44rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			background: #e7faf1;
			border: 2rpx dashed #0fd07e;
			color: #0fd07e;
		}

		.newnumInputon {
			position: relative;
			border: 2rpx solid #0fd07e;

			&::after {
				width: 56rpx;
				height: 4rpx;
				background: #0fd07e;
				border-radius: 2rpx;
				content: '';
				position: absolute;
				bottom: 6rpx;
				left: 12rpx;
			}
		}

		.newpl {
			font-size: 24rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #00bf6e;
			line-height: 36rpx;
		}
	}

	.plate-popup {
		position: fixed;
		z-index: 999;
		background-color: #e3e2e7;
		-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
		bottom: 0;
		width: 100%;
		overflow: hidden;
		text-align: center;
		$height: vww(35);

		//关闭
		.plate-close {
			width: calc(100% - vww(10));
			background: #ffffff;
			line-height: vww(30);
			font-size: vww(12);
			text-align: right;
			padding-right: vww(10);
			color: #00a7ea;
		}

		//键盘主体内容-单行
		.plate-popup-item {
			margin: 0 auto;
			overflow: hidden;
			display: inline-block;
			display: table;

			&:last-child {
				margin-bottom: 2vw;
			}
		}

		//键盘主体内容-单个
		.plate-popup-item-list {
			float: left;
			font-size: vww(14);
			width: 8vw;
			margin: 0 1vw;
			margin-top: 2vw;
			height: $height;
			line-height: $height;
			background: #ffffff;
			border-radius: 5px;
			color: #4a4a4a;
			overflow: hidden;

			//删除键
			&.del {
				width: 14vw;
			}

			&.del2 {
				width: 12vw;
			}

			&.delImg {
				width: 14vw;
				display: flex;

				//删除键图片
				image {
					width: 48rpx;
					height: 48rpx;
					margin: 0 auto;
					display: block;
					vertical-align: middle;
					align-self: center;
				}
			}

			//特殊字符（港澳学）
			&.special {
				background: #f0f2f4;
			}
		}

		.plate-popup-item-disabled {
			background: #f0f2f4;
		}
	}
</style>